<template>
    <div>
        <el-form :model="loginForm" ref="loginForm" :rules="rules" class="loginForm">
            <h1 class="loginTitle">后台登录</h1>
<!--            因为有校验，所以需要加上prop属性-->
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
            </el-form-item>
                <el-checkbox label="是否记住密码" v-model="checked" class="loginRemember"></el-checkbox>
            <el-form-item>
                <el-button type="primary" @click="submitLogin('loginForm')" style="width: 100%">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username:'admin',
                    password:'123'
                },
                rules : {
                    username: [
                        {required:true,message:'请输入用户名',trigger:'blur'},
                        {min:3,max:5,message:'用户名必须在3-5个字符',trigger:'blur'}
                    ],
                    password: [
                        {required:true,message:'请输入密码',trigger:'blur'}
                    ]
                }
            }
        },
        methods: {
            submitLogin(loginForm) {
                this.$refs[loginForm].validate((valid) => {
                    if(valid) {
                        //then中的参数就是服务端返回的参数。已在api.js中进行过二次处理
                        //loginForm:就是上面的return{"loginForm":{}}
                        this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                            if (resp) {
                                //将登录的user信息存入sessionStorage当中，打开页面再关掉就没了
                                window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                                this.$router.replace('/home');
                                //alert(JSON.stringify(resp))
                            }
                        })
                        //alert('submit!');
                    } else {
                        this.$message({
                            message:'请输入用户名或密码',
                            center:true,
                            type:'error'
                        });
                        return false;
                    }
                })
            }
        }
    }
</script>

<style>
    .loginForm {
        /*边框圆角弧度*/
        border-radius: 15px;
        background-clip: padding-box;
        margin: 120px auto;
        width: 350px;
        border: 1px solid #eaeaea;
        padding: 25px 35px 15px 35px;
        box-shadow: 15px 15px 15px #cac6c6;
        background: #fff;
    }

    .loginTitle {
        color: rgba(78, 80, 73, 0.94);
        text-align: center;
    }
    .loginRemember {
        text-align: left;
        margin: 0 auto 20px;
    }
</style>